<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>订单提交</title>
        <link href="../css/submit_order/submit_order.css" rel="stylesheet">
        <link rel="stylesheet" href="../dist/layui/css/layui.css">
<!--        <link rel="stylesheet" href="../dist/bootstrap-3.4.1-dist/css/bootstrap-theme.min.css">-->
    </head>
    <body>
    <!--===================1.头部导航 nav=================-->
    <iframe src="../header/head.html" width="100%" scrolling="no" frameborder="0"></iframe>
    <!--===================2.主体=================-->
    <div class="main">
        <div class="main-info">
            <!--进度条-->
            <div class="info-ProgressBar">
                <div class="layui-progress" lay-showpercent="true">
                    <div class="layui-progress-bar" lay-percent="1 / 3"></div>
                </div>
                <div class="info-stage">
                    <ul>
                        <li>提交订单</li>
                        <li>确认支付</li>
                        <li>完成订单</li>
                    </ul>
                </div>
            </div>
            <!--每个旅客信息-->
            <div class="info-details">
                <div class="info-person-details-title">
                    <i></i><h3>出行人信息</h3>
                </div>
                <div class="info-person-details-p1">
                    <span>出行人1</span>
                    <div class="layui-inline">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input inputname">

                            <span class="warn-msg warn-msg-name"></span>

                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">身份证</label>
                        <div class="layui-input-block">
                            <input type="text" name="identity" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input inputcard">
                            <span  class="warn-msg warn-msg-card"></span>
                        </div>
                    </div>

                </div>

            </div>
            <!--预定人信息-->
            <div class="info-person-booking">
                <div class="info-person-booking-title">
                    <i></i><h3>预订人信息</h3>
                </div>
                <div class="booking-person">
                    <div class="layui-inline">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input inputname1">
                            <span class="warn-msg warn-msg-name1"></span>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">手机号</label>
                        <div class="layui-input-inline">
                            <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">

                            <span class="warn-msg warn-msg-name1"></span>

                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-inline">
                            <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">

                            <span class="warn-msg warn-msg-name"></span>

                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">备注信息</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <!--商品景点信息-->
            <div class="pro-info">
                <div class="pro-main-img" >
                    <img src="../images/submit_order/pro-main-img1.jpeg">
                </div>
                <div class="pro-details" >
                    <h2>
                        <a>成都直飞丽江6天5晚 纯玩自由行（赠大理旅拍/Smart环海自驾+全程专车服务+古城住宿+免费行程攻略设计+大理/丽江/泸沽湖/香格里拉 随心游玩自由搭配+全天24小时管家服务）</a>
                    </h2>
                    <ul>
                        <li>
                            <p>
                                <b>出行天数</b>
                                <em>6</em>
                                <span>天</span>
                            </p>
                            <p>
                                <b>出行日期</b>
                                <i>2021-09-24</i>
                            </p>
                            <p>
                                <b>出行人数</b>
                                <span>成人</span>
                                <em>1</em>
                                <span>儿童</span>
                                <em>0</em>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <!--订单提交信息-->
            <div class="submit-order">
                <div class="price">
                    <span>产品总金额：￥</span>
                    <em>
                        2320.00
                    </em>
                </div>
            </div>
            <div class="submit-order-btn">
                <div class="order-text">
                    <p>
                        <i></i>我已阅读并同意
                        <a href="#">《自友行服务协议》</a>、
                        <a href="#">《旅游安全须知》</a>
                    </p>
                </div>
                <div class="order-btn">
                    提交订单
                </div>
            </div>
        </div>
    </div>
    <!--===================3.底部=================-->
    <div class="footer">

    </div>
    <script src="../js/submit_order/submit_order.js"></script>
    <script src="../dist/layui/layui.js" charset="utf-8"></script>
    </body>
</html>